<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>账号信息维护</title>
</head>
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">


<link rel="stylesheet" href="../../../css/bootstrap-table.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>


<script src="../../../js/bootstrap-table.min.js"></script>

<script src="../../../js/bootstrap-table-zh-CN.min.js"></script>
<body>
<div style="margin-bottom: 20px;">
    <div class="form-inline" style="display: flex;justify-content: center">
        <label for="ss_lei">请输入账号名称：</label>
        <input type="text" class="form-control" id="ss_lei">
        <button class="btn btn-primary" id="ss_btn">搜索</button>
        <button class="btn btn-primary" id="zc_btn" style="margin-left: 30px;">注册账号</button>
        <button class="btn btn-info" style="margin-left: 100px;" id="usergrantrole">账号授予角色</button>
    </div>
</div>

<!--    //账号授予角色模态框-->
<div class="modal fade" id="usergentrolemodal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">用户授予或收回角色 授予账号：<span id="zz"></span></h4>
                <button class="btn btn-warning" style="margin-left: 20%;" id="grantwithdrawuserroleid">授予或收回账号角色
                </button>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body" id="usergentrolemainmodal">
                <!--                    授权编号-->
                <input type="hidden" id="tarid">
                <!--                    登录编号-->
                <input type="hidden" id="accid">
                <table class="table table-bordered table-hover">
                    <thead>
                    <td>选择</td>
                    <td>编号</td>
                    <td>角色名称</td>
                    <td>角色说明</td>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!--注册账号-->
<div class="modal fade" id="zcusermodal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">注册账号：新增账号</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body" id="useraddmodal">
                <div class="form-inline" style="width: 100%">
                    <label style="width: 20%;float: right">
                        账号名称：
                    </label>
                    <input style="width: 60%" type="text"  placeholder="请输入账号" class="form-control" id="zc_userid">
                </div>
                <div class="form-inline" style="width: 100%;margin-top: 1%">
                    <label style="width: 20%;float: right">
                        密码：
                    </label>
                    <input style="width: 60%" type="password" placeholder="请输入密码" class="form-control" id="zc_password">
                </div>
                <button id="add_userbtn" class="btn btn-primary" style="margin-left: 30%;margin-top: 2%;">保存</button>
            </div>
        </div>
    </div>
</div>
<div>
    <table id="user_table">

    </table>
</div>

<script>

    $(function () {
        $("#user_table").bootstrapTable({
            method: "post",
            contentType: "application/x-www-form-urlencoded;charset=utf-8",
            url: "/sys/queryallusershow",
            striped: true,
            pageNumber: 1,
            pagination: true,
            sidePagination: "server",
            pageSize: 3,
            pageList: [3, 5, 8, 10],
            queryParams: function (parms) {
                return {
                    pageNumber: (parms.offset / parms.limit) + 1,
                    pageSize: parms.limit,
                    username:$("#ss_lei").val()
                }
            },
            columns: [

                {
                    title: "选择", field: "check", align: "center",
                    formatter: function (value, row, index) {
                        var input1 = "<input class='form-control' value='" + row.id + "' type='checkbox'>"
                        return input1;
                    }
                },
                {title: "序号", field: "id", align: "center"},
                {title: "用户名称", field: "loginId", align: "center"},
                {title: "状态", field: "status", align: "center"},
            ],
        })
        $("#ss_btn").click(function () {
            $("#user_table").bootstrapTable("refresh");
        })

        //账号授予角色
        $("#usergrantrole").click(function () {
            //查询授予角色的账号是否为当前登录账号：不能给当前登录账号进行角色授权或收回
            $.ajax({
                type: "POST",
                url: "/SysUser/queryUser",
                success: function (loginuser) {
                    $("#user_table input:checked").each(function () {
                        if (loginuser.id == $("#user_table tr td:eq(0)>input:checked").val()) {
                            alert("当前选择账号为登录账号不能给登录账号进行账号角色的授权何和收回")
                        } else {
                            $("#zz").text($(this).parent().next().next().text())
                            $("#tarid").val($(this).val())
                            $("#accid").val(loginuser.id)
                            //查询当前登录账号所拥有的角色.  查询授权账号拥有的角色
                            $.ajax({
                                type: "post",
                                data: "id=" + $(this).val(),
                                url: "/sys/usergentroleselect",
                                success: function (selectdata) {
                                    //用户授予角色的表
                                    $("#usergentrolemainmodal tbody").empty();
                                    console.log(selectdata.s)
                                    console.log(selectdata.sysroles)
                                    $.each(selectdata.sysroles, function (index, v) {
                                        $("#usergentrolemainmodal tbody").append("<tr>" +
                                            "<td><input type='checkbox' value='" + v.id + "' class='form-control'></td>" +
                                            "<td>" + v.id + "</td>" +
                                            "<td>" + v.name + "</td>" +
                                            "<td>" + v.descn + "</td>" +
                                            "</tr>")
                                    })
                                    $("#usergentrolemainmodal tbody input[type=checkbox]").each(function () {
                                        if (selectdata.s.indexOf($(this).val() + ",") > -1) {
                                            $(this).prop("checked", "checked");
                                        }
                                    })
                                    $("#usergentrolemodal").modal("show")
                                }
                            })
                        }
                    })
                }
            })
        })

        //授予或收回账号角色
        $("#grantwithdrawuserroleid").click(function () {
            //所有被选中的编号
            var roleobj = []
            var roles = {};
            $("#usergentrolemainmodal tbody input:checked").each(function () {
                roles = {
                    id: $(this).val()
                }
                roleobj.unshift(roles)
            })
            $.ajax({
                type: "post",
                data: JSON.stringify({sysroles: roleobj, loginid: $("#accid").val(), tarid: $("#tarid").val()}),
                contentType: 'application/json',
                url: "/sys/grantwithdrawuserrole",
                success: function () {
                    $("#usergentrolemodal").modal("hide")
                }
            })
        })

        //注册账号显示
        $("#zc_btn").click(function () {
            $("#zc_userid").val("");
            $("#zc_password").val("");
            $("#zcusermodal").modal("show");
        })
        //注册账号
        $("#add_userbtn").click(function () {
            $.ajax({
                type:"post",
                url:"/sys/insertuserzc",
                data:"loginId="+$("#zc_userid").val()+"&password="+$("#zc_password").val(),
                success:function (yn) {
                    $("#zcusermodal").modal("hide");
                        alert("新增账号成功")
                        $("#user_table").bootstrapTable("refresh");
                }
            })
        })
    })
</script>
</body>
</html>